<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>html5 | 掏钱的机器猫</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="/vue-admin-ui/assets/logo.png">
    <meta name="description" content="掏钱的机器猫的个人博客,记录随笔与学习笔记，个人项目等">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    
    <link rel="preload" href="/vue-admin-ui/assets/css/0.styles.fb55c927.css" as="style"><link rel="preload" href="/vue-admin-ui/assets/js/app.21d1badc.js" as="script"><link rel="preload" href="/vue-admin-ui/assets/js/3.d02ddc64.js" as="script"><link rel="preload" href="/vue-admin-ui/assets/js/1.38c8ef5a.js" as="script"><link rel="preload" href="/vue-admin-ui/assets/js/16.953b2589.js" as="script"><link rel="prefetch" href="/vue-admin-ui/assets/js/10.d9a14dc0.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/11.284df538.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/12.530bdb86.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/13.3dde5c1a.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/14.e18000c4.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/15.65b98979.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/17.d6be13fa.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/18.a10ec5a3.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/19.f2ef083a.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/20.9e024a1a.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/21.b818c6cd.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/22.f3716a62.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/23.42bfb2a3.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/24.0382e6dc.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/25.9b1cf793.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/26.626abbca.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/27.d6b1a7e8.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/28.7381bce0.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/29.65b69672.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/30.70062600.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/31.036bec0e.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/32.1ec26c99.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/33.69485516.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/34.30a7370c.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/35.1e72f74a.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/36.a6aaafe3.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/4.984f5e20.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/5.2cbf0f84.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/6.eab8daa0.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/7.41bb2a3c.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/8.79ebffb7.js"><link rel="prefetch" href="/vue-admin-ui/assets/js/9.e9ae19e3.js">
    <link rel="stylesheet" href="/vue-admin-ui/assets/css/0.styles.fb55c927.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container" data-v-2d5f533b><div data-v-2d5f533b><div id="loader-wrapper" class="loading-wrapper" data-v-d48f4d20 data-v-2d5f533b data-v-2d5f533b><div class="loader-main" data-v-d48f4d20><div data-v-d48f4d20></div><div data-v-d48f4d20></div><div data-v-d48f4d20></div><div data-v-d48f4d20></div></div> <!----> <!----></div> <div class="password-shadow password-wrapper-out" style="display:none;" data-v-64685f0e data-v-2d5f533b data-v-2d5f533b><h3 class="title" style="display:none;" data-v-64685f0e data-v-64685f0e>掏钱的机器猫</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-64685f0e data-v-64685f0e><input type="password" value="" data-v-64685f0e> <span data-v-64685f0e>Konck! Knock!</span> <button data-v-64685f0e>OK</button></label> <div class="footer" style="display:none;" data-v-64685f0e data-v-64685f0e><span data-v-64685f0e><i class="iconfont reco-theme" data-v-64685f0e></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-64685f0e>vuePress-theme-reco</a></span> <span data-v-64685f0e><i class="iconfont reco-copyright" data-v-64685f0e></i> <a data-v-64685f0e><span data-v-64685f0e>Ethan</span>
              
            <span data-v-64685f0e>2018 - </span>
            2022
          </a></span></div></div> <div class="hide" data-v-2d5f533b><header class="navbar" data-v-2d5f533b><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-admin-ui/" class="home-link router-link-active"><img src="/vue-admin-ui/assets/logo.png" alt="掏钱的机器猫" class="logo"> <span class="site-name">掏钱的机器猫</span></a> <div class="links"><div class="color-picker"><a class="color-button"><i class="iconfont reco-color"></i></a> <div class="color-picker-menu" style="display:none;"><div class="mode-options"><h4 class="title">Choose mode</h4> <ul class="color-mode-options"><li class="dark">dark</li><li class="auto active">auto</li><li class="light">light</li></ul></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-document"></i>
        插件文档
      </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vue-admin-ui/category/vue-admin-ui-lib/" class="nav-link"><i class="iconfont undefined"></i>
    vue-admin-ui-lib
  </a></li><li class="dropdown-item"><!----> <a href="/vue-admin-ui/category/submit-valid/" class="nav-link"><i class="iconfont undefined"></i>
    submit-valid
  </a></li><li class="dropdown-item"><!----> <a href="/vue-admin-ui/category/open-utils/" class="nav-link"><i class="iconfont undefined"></i>
    open-utils
  </a></li></ul></div></div><div class="nav-item"><a href="/vue-admin-ui/handle/handle/method.html" class="nav-link"><i class="iconfont undefined"></i>
    手写代码
  </a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
        个人站点
      </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://gitee.com/ethan6" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-mayun"></i>
    Gitee
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://github.com/Ethan66" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
    Github
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <a href="https://github.com/Ethan66/vue-admin-ui" target="_blank" rel="noopener noreferrer" class="repo-link"><i class="iconfont reco-github"></i>
      Github
      <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask" data-v-2d5f533b></div> <aside class="sidebar" data-v-2d5f533b><div class="personal-info-wrapper" data-v-ca798c94 data-v-2d5f533b><img src="/vue-admin-ui/assets/logo.png" alt="author-avatar" class="personal-img" data-v-ca798c94> <h3 class="name" data-v-ca798c94>
    Ethan
  </h3> <div class="num" data-v-ca798c94><div data-v-ca798c94><h3 data-v-ca798c94>24</h3> <h6 data-v-ca798c94>文章</h6></div> <div data-v-ca798c94><h3 data-v-ca798c94>11</h3> <h6 data-v-ca798c94>标签</h6></div></div> <hr data-v-ca798c94></div> <nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-document"></i>
        插件文档
      </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vue-admin-ui/category/vue-admin-ui-lib/" class="nav-link"><i class="iconfont undefined"></i>
    vue-admin-ui-lib
  </a></li><li class="dropdown-item"><!----> <a href="/vue-admin-ui/category/submit-valid/" class="nav-link"><i class="iconfont undefined"></i>
    submit-valid
  </a></li><li class="dropdown-item"><!----> <a href="/vue-admin-ui/category/open-utils/" class="nav-link"><i class="iconfont undefined"></i>
    open-utils
  </a></li></ul></div></div><div class="nav-item"><a href="/vue-admin-ui/handle/handle/method.html" class="nav-link"><i class="iconfont undefined"></i>
    手写代码
  </a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
        个人站点
      </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://gitee.com/ethan6" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-mayun"></i>
    Gitee
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://github.com/Ethan66" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
    Github
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <a href="https://github.com/Ethan66/vue-admin-ui" target="_blank" rel="noopener noreferrer" class="repo-link"><i class="iconfont reco-github"></i>
      Github
      <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span></span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vue-admin-ui/article/browser/browser.html" class="sidebar-link">浏览器渲染机制</a></li><li><a href="/vue-admin-ui/article/browser/CSRF,XSS.html" class="sidebar-link">js之安全问题：Cookie、CSRF和XSS</a></li><li><a href="/vue-admin-ui/article/browser/css.html" class="sidebar-link">css</a></li><li><a href="/vue-admin-ui/article/browser/Dom.html" class="sidebar-link">DOM</a></li><li><a href="/vue-admin-ui/article/browser/html5.html" aria-current="page" class="active sidebar-link">html5</a></li><li><a href="/vue-admin-ui/article/browser/performanceOptimize.html" class="sidebar-link">js之页面性能优化</a></li></ul></section></li></ul> </aside> <div class="password-shadow password-wrapper-in" style="display:none;" data-v-64685f0e data-v-2d5f533b><h3 class="title" style="display:none;" data-v-64685f0e data-v-64685f0e>html5</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-64685f0e data-v-64685f0e><input type="password" value="" data-v-64685f0e> <span data-v-64685f0e>Konck! Knock!</span> <button data-v-64685f0e>OK</button></label> <div class="footer" style="display:none;" data-v-64685f0e data-v-64685f0e><span data-v-64685f0e><i class="iconfont reco-theme" data-v-64685f0e></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-64685f0e>vuePress-theme-reco</a></span> <span data-v-64685f0e><i class="iconfont reco-copyright" data-v-64685f0e></i> <a data-v-64685f0e><span data-v-64685f0e>Ethan</span>
              
            <span data-v-64685f0e>2018 - </span>
            2022
          </a></span></div></div> <div data-v-2d5f533b><main class="page"><div class="page-title" style="display:none;"><h1 class="title">html5</h1> <div data-v-3b7f5bdf><i class="iconfont reco-account" data-v-3b7f5bdf><span data-v-3b7f5bdf>Ethan</span></i> <i class="iconfont reco-date" data-v-3b7f5bdf><span data-v-3b7f5bdf>2020-10-23</span></i> <!----> <i class="iconfont reco-tag tags" data-v-3b7f5bdf><span class="tag-item" data-v-3b7f5bdf>html</span></i></div></div> <div class="theme-reco-content content__default" style="display:none;"><p><img src="https://drscdn.500px.org/photo/304321169/q%3D80_m%3D2000/v2?webp=true&amp;sig=39cecac63df0675dfac5df8ec3b924f46df3edb70dfa73f3dc44d20186b8a678" alt=""></p> <h1 id="html5"><a href="#html5" class="header-anchor">#</a> html5</h1> <h2 id="什么是html5"><a href="#什么是html5" class="header-anchor">#</a> 什么是HTML5</h2> <blockquote><p>广义概念：HTML的升级版、CSS的升级版、JavaScript API的升级版。</p></blockquote> <h2 id="兼容性"><a href="#兼容性" class="header-anchor">#</a> 兼容性</h2> <p>IE8 及以下版本的浏览器不支持 H5 和 CSS3。解决办法：引入html5shiv.js文件。</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>// 条件注释 只有ie能够识别
&lt;!--[if lte ie 8]&gt;
    &lt;script src=&quot;html5shiv.min.js&quot;&gt;&lt;/script&gt;
&lt;![endif]--&gt;

l：less 更小; t：than 比; e：equal等于; g：great 更大
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="js-api"><a href="#js-api" class="header-anchor">#</a> JS API</h2> <ul><li>添加自定义属性：以data-开头</li> <li>新的选择器：querySelector、querySelectorAll</li> <li>element.classList</li> <li>访问历史API</li> <li>全屏API</li> <li>网页存储：application, Cache, localStorage, sessionStorage, WebSQL, indexedDB</li> <li>设备信息访问：网络状态，硬件访问，设备访问，地理围栏</li> <li>文件：文件系统API，fileReader</li> <li>网络访问：XMLHttpRequest, fetch, WebSocket</li> <li>多线程</li> <li>桌面通知</li></ul> <h2 id="标签语义化"><a href="#标签语义化" class="header-anchor">#</a> 标签语义化</h2> <blockquote><p>1、能够便于开发者阅读和写出更优雅的代码。2、同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容。3、更好地搜索引擎优化。</p></blockquote> <h3 id="传统网页布局"><a href="#传统网页布局" class="header-anchor">#</a> 传统网页布局</h3> <div class="demo-block demo-zh-CN demo-html5.html" data-v-558b0118><div class="demo-content" data-v-558b0118><div><div><div>传统网页布局</div> <div class="header"><ul class="nav"></ul></div> <div class="main"><div class="article"></div> <div class="aside"></div></div> <div class="footer"></div></div></div></div> <div class="meta" data-v-558b0118><!----> <div class="code-content" data-v-558b0118><div class="language-html line-numbers-mode" data-v-558b0118><pre class="language-html" data-v-558b0118><code data-v-558b0118><span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;</span>template</span><span class="token punctuation" data-v-558b0118>&gt;</span></span>
  <span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;</span>div</span><span class="token punctuation" data-v-558b0118>&gt;</span></span>
    <span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;</span>div</span><span class="token punctuation" data-v-558b0118>&gt;</span></span>传统网页布局<span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;/</span>div</span><span class="token punctuation" data-v-558b0118>&gt;</span></span>
    <span class="token comment" data-v-558b0118>&lt;!-- 头部 --&gt;</span>
    <span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;</span>div</span> <span class="token attr-name" data-v-558b0118>class</span><span class="token attr-value" data-v-558b0118><span class="token punctuation attr-equals" data-v-558b0118>=</span><span class="token punctuation" data-v-558b0118>&quot;</span>header<span class="token punctuation" data-v-558b0118>&quot;</span></span><span class="token punctuation" data-v-558b0118>&gt;</span></span>
      <span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;</span>ul</span> <span class="token attr-name" data-v-558b0118>class</span><span class="token attr-value" data-v-558b0118><span class="token punctuation attr-equals" data-v-558b0118>=</span><span class="token punctuation" data-v-558b0118>&quot;</span>nav<span class="token punctuation" data-v-558b0118>&quot;</span></span><span class="token punctuation" data-v-558b0118>&gt;</span></span><span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;/</span>ul</span><span class="token punctuation" data-v-558b0118>&gt;</span></span>
    <span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;/</span>div</span><span class="token punctuation" data-v-558b0118>&gt;</span></span>
    <span class="token comment" data-v-558b0118>&lt;!-- 主体部分 --&gt;</span>
    <span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;</span>div</span> <span class="token attr-name" data-v-558b0118>class</span><span class="token attr-value" data-v-558b0118><span class="token punctuation attr-equals" data-v-558b0118>=</span><span class="token punctuation" data-v-558b0118>&quot;</span>main<span class="token punctuation" data-v-558b0118>&quot;</span></span><span class="token punctuation" data-v-558b0118>&gt;</span></span>
      <span class="token comment" data-v-558b0118>&lt;!-- 文章 --&gt;</span>
      <span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;</span>div</span> <span class="token attr-name" data-v-558b0118>class</span><span class="token attr-value" data-v-558b0118><span class="token punctuation attr-equals" data-v-558b0118>=</span><span class="token punctuation" data-v-558b0118>&quot;</span>article<span class="token punctuation" data-v-558b0118>&quot;</span></span><span class="token punctuation" data-v-558b0118>&gt;</span></span><span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;/</span>div</span><span class="token punctuation" data-v-558b0118>&gt;</span></span>
      <span class="token comment" data-v-558b0118>&lt;!-- 侧边栏 --&gt;</span>
      <span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;</span>div</span> <span class="token attr-name" data-v-558b0118>class</span><span class="token attr-value" data-v-558b0118><span class="token punctuation attr-equals" data-v-558b0118>=</span><span class="token punctuation" data-v-558b0118>&quot;</span>aside<span class="token punctuation" data-v-558b0118>&quot;</span></span><span class="token punctuation" data-v-558b0118>&gt;</span></span><span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;/</span>div</span><span class="token punctuation" data-v-558b0118>&gt;</span></span>
    <span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;/</span>div</span><span class="token punctuation" data-v-558b0118>&gt;</span></span>
    <span class="token comment" data-v-558b0118>&lt;!-- 底部 --&gt;</span>
    <span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;</span>div</span> <span class="token attr-name" data-v-558b0118>class</span><span class="token attr-value" data-v-558b0118><span class="token punctuation attr-equals" data-v-558b0118>=</span><span class="token punctuation" data-v-558b0118>&quot;</span>footer<span class="token punctuation" data-v-558b0118>&quot;</span></span><span class="token punctuation" data-v-558b0118>&gt;</span></span><span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;/</span>div</span><span class="token punctuation" data-v-558b0118>&gt;</span></span>
  <span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;/</span>div</span><span class="token punctuation" data-v-558b0118>&gt;</span></span>
<span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;/</span>template</span><span class="token punctuation" data-v-558b0118>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-558b0118><span class="line-number" data-v-558b0118>1</span><br data-v-558b0118><span class="line-number" data-v-558b0118>2</span><br data-v-558b0118><span class="line-number" data-v-558b0118>3</span><br data-v-558b0118><span class="line-number" data-v-558b0118>4</span><br data-v-558b0118><span class="line-number" data-v-558b0118>5</span><br data-v-558b0118><span class="line-number" data-v-558b0118>6</span><br data-v-558b0118><span class="line-number" data-v-558b0118>7</span><br data-v-558b0118><span class="line-number" data-v-558b0118>8</span><br data-v-558b0118><span class="line-number" data-v-558b0118>9</span><br data-v-558b0118><span class="line-number" data-v-558b0118>10</span><br data-v-558b0118><span class="line-number" data-v-558b0118>11</span><br data-v-558b0118><span class="line-number" data-v-558b0118>12</span><br data-v-558b0118><span class="line-number" data-v-558b0118>13</span><br data-v-558b0118><span class="line-number" data-v-558b0118>14</span><br data-v-558b0118><span class="line-number" data-v-558b0118>15</span><br data-v-558b0118><span class="line-number" data-v-558b0118>16</span><br data-v-558b0118><span class="line-number" data-v-558b0118>17</span><br data-v-558b0118><span class="line-number" data-v-558b0118>18</span><br data-v-558b0118></div></div></div></div> <div class="demo-block-control" style="width:unset;" data-v-558b0118><i class="caret-bottom icon" data-v-558b0118 data-v-558b0118></i> <span style="display:none;" data-v-558b0118 data-v-558b0118>显示代码</span> <span class="copy-action" style="display:;" data-v-558b0118>复制代码</span> <span class="copy-action copy-action-success" style="display:none;" data-v-558b0118 data-v-558b0118>复制代码</span></div></div><h3 id="html5布局"><a href="#html5布局" class="header-anchor">#</a> HTML5布局</h3> <div class="demo-block demo-zh-CN demo-html5.html" data-v-558b0118><div class="demo-content" data-v-558b0118><div><div><div>H5布局</div> <header><nav></nav></header> <div class="main"><article></article> <aside></aside></div> <footer></footer></div></div></div> <div class="meta" data-v-558b0118><!----> <div class="code-content" data-v-558b0118><div class="language-html line-numbers-mode" data-v-558b0118><pre class="language-html" data-v-558b0118><code data-v-558b0118><span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;</span>template</span><span class="token punctuation" data-v-558b0118>&gt;</span></span>
  <span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;</span>div</span><span class="token punctuation" data-v-558b0118>&gt;</span></span>
    <span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;</span>div</span><span class="token punctuation" data-v-558b0118>&gt;</span></span>H5布局<span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;/</span>div</span><span class="token punctuation" data-v-558b0118>&gt;</span></span>
    <span class="token comment" data-v-558b0118>&lt;!-- 头部 --&gt;</span>
    <span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;</span>header</span><span class="token punctuation" data-v-558b0118>&gt;</span></span>
        <span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;</span>nav</span><span class="token punctuation" data-v-558b0118>&gt;</span></span><span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;/</span>nav</span><span class="token punctuation" data-v-558b0118>&gt;</span></span>
    <span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;/</span>header</span><span class="token punctuation" data-v-558b0118>&gt;</span></span>
    <span class="token comment" data-v-558b0118>&lt;!-- 主体部分 --&gt;</span>
    <span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;</span>div</span> <span class="token attr-name" data-v-558b0118>class</span><span class="token attr-value" data-v-558b0118><span class="token punctuation attr-equals" data-v-558b0118>=</span><span class="token punctuation" data-v-558b0118>&quot;</span>main<span class="token punctuation" data-v-558b0118>&quot;</span></span><span class="token punctuation" data-v-558b0118>&gt;</span></span>
      <span class="token comment" data-v-558b0118>&lt;!-- 文章 --&gt;</span>
      <span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;</span>article</span><span class="token punctuation" data-v-558b0118>&gt;</span></span><span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;/</span>article</span><span class="token punctuation" data-v-558b0118>&gt;</span></span>
      <span class="token comment" data-v-558b0118>&lt;!-- 侧边栏 --&gt;</span>
      <span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;</span>aside</span><span class="token punctuation" data-v-558b0118>&gt;</span></span><span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;/</span>aside</span><span class="token punctuation" data-v-558b0118>&gt;</span></span>
    <span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;/</span>div</span><span class="token punctuation" data-v-558b0118>&gt;</span></span>
    <span class="token comment" data-v-558b0118>&lt;!-- 底部 --&gt;</span>
    <span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;</span>footer</span><span class="token punctuation" data-v-558b0118>&gt;</span></span><span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;/</span>footer</span><span class="token punctuation" data-v-558b0118>&gt;</span></span>
  <span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;/</span>div</span><span class="token punctuation" data-v-558b0118>&gt;</span></span>
<span class="token tag" data-v-558b0118><span class="token tag" data-v-558b0118><span class="token punctuation" data-v-558b0118>&lt;/</span>template</span><span class="token punctuation" data-v-558b0118>&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper" data-v-558b0118><span class="line-number" data-v-558b0118>1</span><br data-v-558b0118><span class="line-number" data-v-558b0118>2</span><br data-v-558b0118><span class="line-number" data-v-558b0118>3</span><br data-v-558b0118><span class="line-number" data-v-558b0118>4</span><br data-v-558b0118><span class="line-number" data-v-558b0118>5</span><br data-v-558b0118><span class="line-number" data-v-558b0118>6</span><br data-v-558b0118><span class="line-number" data-v-558b0118>7</span><br data-v-558b0118><span class="line-number" data-v-558b0118>8</span><br data-v-558b0118><span class="line-number" data-v-558b0118>9</span><br data-v-558b0118><span class="line-number" data-v-558b0118>10</span><br data-v-558b0118><span class="line-number" data-v-558b0118>11</span><br data-v-558b0118><span class="line-number" data-v-558b0118>12</span><br data-v-558b0118><span class="line-number" data-v-558b0118>13</span><br data-v-558b0118><span class="line-number" data-v-558b0118>14</span><br data-v-558b0118><span class="line-number" data-v-558b0118>15</span><br data-v-558b0118><span class="line-number" data-v-558b0118>16</span><br data-v-558b0118><span class="line-number" data-v-558b0118>17</span><br data-v-558b0118><span class="line-number" data-v-558b0118>18</span><br data-v-558b0118></div></div></div></div> <div class="demo-block-control" style="width:unset;" data-v-558b0118><i class="caret-bottom icon" data-v-558b0118 data-v-558b0118></i> <span style="display:none;" data-v-558b0118 data-v-558b0118>显示代码</span> <span class="copy-action" style="display:;" data-v-558b0118>复制代码</span> <span class="copy-action copy-action-success" style="display:none;" data-v-558b0118 data-v-558b0118>复制代码</span></div></div><h2 id="html5常用新语义标签"><a href="#html5常用新语义标签" class="header-anchor">#</a> html5常用新语义标签</h2> <div class="language- line-numbers-mode"><pre class="language-text"><code>1、 &lt;nav&gt;： 表示导航。 &lt;header&gt;： 表示页眉。 &lt;footer&gt;： 表示页脚。
2、&lt;section&gt;： 表示区块
3、&lt;article&gt;: 表示文章。如文章、评论、帖子、博客
4、&lt;aside&gt; 表示侧边栏 如文章的侧栏
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h2 id="html5新增表单"><a href="#html5新增表单" class="header-anchor">#</a> html5新增表单</h2> <p>下面的部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>type类型：
1、email email格式。自带验证功能。
2、tel 手机号码。
3、url 只能输入url格式。
4、number 只能输入数字。
5、search 搜索框
6、range 滑动条
7、color 拾色器
8、time	时间，date 日期，datetime 时间日期，month 月份，week 星期

属性：
placeholder 占位符
autofocus 自动获取焦点
multiple 文件上传多选或多个邮箱地址
autocomplete 自动完成（填充的）。on 开启（默认），off 取消。用于表单元素，也可用于表单自身(on/off)
form 指定表单项属于哪个form，处理复杂表单时会需要
novalidate 关闭默认的验证功能（只能加给form）
required 表示必填项
pattern 自定义正则，验证表单。例如
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h2 id="多媒体"><a href="#多媒体" class="header-anchor">#</a> 多媒体</h2> <ul><li>在HTML5之前，在网页上播放音频/视频是利用Flash来播放。但是并非所有用户的浏览器都安装了Flash插件。移动设备的浏览器并不支持Flash插件。</li> <li>HTML5通过<code>audio</code>标签来播放音频。通过<code>video</code>标签来播放视频。</li></ul> <div class="language- line-numbers-mode"><pre class="language-text"><code>&lt;audio src=&quot;music/yinyue.mp3&quot; autoplay controls&gt; &lt;/audio&gt;
&lt;video src=&quot;video/movie.mp4&quot; controls autoplay&gt;&lt;/video&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="自定义属性"><a href="#自定义属性" class="header-anchor">#</a> 自定义属性</h2> <div class="language- line-numbers-mode"><pre class="language-text"><code>&lt;div class=&quot;box&quot; title=&quot;盒子&quot; data-my-name=&quot;smyhvae&quot; data-content=&quot;我是一个div&quot;&gt;div&lt;/div&gt;
document.querySelector('.box').dataset('content')
document.querySelector('.box').dataset('myName')
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div> <footer class="page-edit" style="display:none;"><!----> <div class="last-updated"><span class="prefix">上次更新: </span> <span class="time">2022/7/8 上午10:51:20</span></div></footer> <!----> <!----> <!----></main> <!----></div></div></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-c6073ba8 data-v-c6073ba8><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-c6073ba8><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-c6073ba8></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-c6073ba8></path></svg></div></div></div>
    <script src="/vue-admin-ui/assets/js/app.21d1badc.js" defer></script><script src="/vue-admin-ui/assets/js/3.d02ddc64.js" defer></script><script src="/vue-admin-ui/assets/js/1.38c8ef5a.js" defer></script><script src="/vue-admin-ui/assets/js/16.953b2589.js" defer></script>
  </body>
</html>
